<template>
  <v-card>
    <v-card flat outlined>
<!--      <v-toolbar color="primary">-->
<!--        <v-toolbar-title style="color: white">私信</v-toolbar-title>-->
<!--      </v-toolbar>-->
      <v-tabs vertical v-model="tab">
        <v-tab v-for="(item, index) in chatList" :key="index">
          <!-- <v-icon left> mdi-account </v-icon> -->
          {{ item.info.username }}
        </v-tab>

        <v-tabs-items v-model="tab">
          <v-tab-item v-for="(item, index) in chatList" :key="index" >
            <chat-message-box :messageInfo="item"></chat-message-box>
            <chat-text-area :messageInfo="item"></chat-text-area>
          </v-tab-item>
        </v-tabs-items>
      </v-tabs>
    </v-card>
  </v-card>
</template>

<script>
import axios from "axios";
import chatMessageBox from "../../../components/chat/chatMessageBox.vue";
import chatTextArea from "../../../components/chat/chatTextArea.vue";
export default {
  components: { chatMessageBox, chatTextArea },
  data() {
    return {
      items: [],
      tab: null,
      domainList: [],
      subscription_keyword: "",
      chatList: [],
    };
  },
  methods: {
    addDomain() {
      axios
        .post(
          "/api/topic/",
          {
            topic: "ahaha",
            user: JSON.parse(localStorage.getItem("userinfo")).id,
          },
          {
            headers: {
              Authorization: "Bearer " + localStorage.getItem("access"),
            },
          }
        )
        .then(function (response) {
          const data = response.data;
          console.log(data);
          //   that.personData.following = data.count;
        });
    },
    closeTag(index) {
      console.log("close" + index);
    },
    getChat() {
      const that = this;
      axios
        .get("/api/message/user/", {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("access"),
          },
        })
        .then(function (response) {
          const data = response.data;
          console.log(data);
          that.chatList = data;
        });
    },
  },
  mounted() {
    this.getChat();
  },
};
</script>
